<template>
  <div class="register-container">
    <div class="register-title">
      <img alt="logo" class="logo" src="../../assets/images/logo.jpg" />
      <h3 class="ml-3">工业云综合服务平台</h3>
    </div>

    <div class="register_box">
      <h3 class="ml-20 mb-20">用户注册</h3>
      <a-form-model
        :model="form"
        ref="ruleForm"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        :rules="rules"
        @submit="handleSubmit"
      >
        <a-form-model-item label="用户名" prop="username">
          <a-input v-model="form.username" placeholder="请输入用户名" />
        </a-form-model-item>
        <a-form-model-item
          label="密码"
          prop="password"
          :visibilityToggle="true"
          has-feedback
        >
          <a-input-password
            type="password"
            v-model="form.password"
            placeholder="请输入密码"
          />
        </a-form-model-item>
        <a-form-model-item
          label="确认密码"
          prop="confirm"
          :visibilityToggle="true"
          has-feedback
        >
          <a-input-password
            type="password"
            v-model="form.confirm"
            @blur="handleConfirmBlur"
            placeholder="请输入确认密码"
          />
        </a-form-model-item>
        <a-form-model-item label="统一社会信用代码" prop="companyCode">
          <a-input
            v-model="form.companyCode"
            placeholder="请输入统一社会信用代码"
          />
        </a-form-model-item>
        <a-form-model-item label="企业名称" prop="companyName">
          <a-input v-model="form.companyName" placeholder="请输入企业名称" />
        </a-form-model-item>

        <a-form-model-item label="法人类型" prop="legalType">
          <a-select
            style="width: 100%"
            v-model="form.legalType"
            placeholder="请选择法人类型"
          >
            <a-select-option value="1"> 机关法人 </a-select-option>
            <a-select-option value="2"> 事业单位法人 </a-select-option>
            <a-select-option value="3"> 企业法人 </a-select-option>
            <a-select-option value="4"> 社团法人 </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="法人姓名" prop="legal">
          <a-input v-model="form.legal" placeholder="请输入法人姓名" />
        </a-form-model-item>

        <a-form-model-item label="邮箱" prop="email">
          <a-input v-model="form.email" placeholder="请输入邮箱" />
        </a-form-model-item>

        <a-form-model-item label="法人联系方式" prop="legalTel">
          <a-input v-model="form.legalTel" placeholder="请输入法人联系方式" />
        </a-form-model-item>

        <!-- <a-form-model-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }" style="text-align: center;">
                    <a-checkbox v-decorator="['agreement', { valuePropName: 'checked' }]">
                        我已阅读平台的
                        <a href="">
                            相关协议与政策
                        </a>
                    </a-checkbox>
                </a-form-model-item> -->
        <a-form-model-item
          :label-col="{ span: 0 }"
          :wrapper-col="{ span: 24 }"
          style="text-align: center"
        >
          <a-button type="primary" html-type="submit" style="width: 100px">
            注册
          </a-button>
          <a-button
            class="ml-20"
            type="default"
            html-type="submit"
            style="width: 100px"
            @click="$router.back()"
          >
            返回
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import { preRegister } from "../../apis/login";
import { validatePassword } from "./validatePassword";
import { encrypt } from '@/utils/jsencrypt'

export default {
  data() {
    return {
      confirmDirty: false,
      form: {
        username: "",
        password: "",
        confirm: "",
        companyCode: "",
        companyName: "",
        legalType: undefined,
        legal: "",
        email: "",
        legalTel: "",
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 24,
            offset: 0,
          },
        },
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码!",
          },
          {
            validator: validatePassword,
            trigger: "blur",
          },
          {
            validator: this.validateToNextPassword,
            trigger: "blur",
          },
        ],
        companyName: [
          {
            required: true,
            message: "请输入企业名称",
            trigger: "blur",
          },
        ],
        confirm: [
          {
            required: true,
            message: "请输入确认密码!",
          },
          {
            validator: this.compareToFirstPassword,
            trigger: "blur",
          },
        ],
        companyCode: [
          {
            required: true,
            message: "请输入统一社会信用代码!",
            trigger: "blur",
          },
        ],
        legalType: [{ required: true, message: "请选择法人类型!" }],
        legal: [
          {
            required: true,
            message: "请输入法人姓名!",
            trigger: "blur",
          },
        ],
        email: [
          {
            type: "email",
            message: "邮箱格式不正确!",
          },
          {
            required: true,
            message: "请输入邮箱!",
          },
        ],
        legalTel: [
          {
            required: true,
            message: "请输入法人联系方式!",
            trigger: "blur",
          },
          {
            pattern:
              /\d{3}-\d{8}|\d{4}-\d{7}|^1(3[0-9]|4[57]|5[0-35-9]|7[0678]|8[0-9])\d{8}$/,
            message: "无效的电话号码，电话请加上区号与“-”",
            trigger: "blur",
          },
        ],
      },
    };
  },
  // beforeCreate () {
  //     this.form = this.$form.createForm(this, { name: 'register' });
  // },
  methods: {
    compareToFirstPassword(rule, value, callback) {
      console.log("value", value);
      console.log("this.form.password", this.form.password);

      // console.log(this.$refs.ruleForm.getFieldValue('password'));
      if (value && value !== this.form.password) {
        console.log("两次输入的密码不一致!");
        callback(new Error("两次输入的密码不一致!"));
      } else {
        console.log("ok");
        callback();
      }
    },
    validateToNextPassword(rule, value, callback) {
      console.log("value", value);

      if (value && this.confirmDirty) {
        console.log("this.$refs.ruleForm", this.$refs.ruleForm);
        this.$refs.ruleForm.validateField(["confirm"], { force: true });
      }
      callback();
    },
    handleSubmit(e) {
      e.preventDefault();
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.form.password = encrypt(this.form.password);
          preRegister(this.form).then((res) => {
            if (res.code == 200) {
              console.log("res", res);
              this.$message.success("注册成功");
              this.$router.back();
            } else {
              this.$message.error("注册失败, " + res.msg);
            }
          });
          // 提交
          // this.addfeedbackInfo();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      // this.form.validateFieldsAndScroll((err, values) => {
      //     if (!err) {
      //         console.log('Received values of form: ', values);
      //     }
      // });
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },
  },
};
</script>
<style lang="less" scoped>
.register-title {
  max-width: 400px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 60px 40px;
}

.register-container {
  // background-image: url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg);
  background-color: #f5f7fa;
  height: 100vh;

  .logo {
    width: 32px;
  }

  .register_box {
    padding-top: 30px;
    padding-right: 40px;
    width: 40%;
    margin: auto;
    background-color: #fff;
  }

  h3 {
    // margin: 0 0;
    // margin-bottom: 20px;
    padding-left: 12px;
    height: 48px;
    line-height: 48px;
    font-weight: 700;
    font-size: 24px;
    color: #303133;
    text-align: left;
  }
}
</style>
